<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>栅格系统</title>
		<!--rel="stylesheet" web样式表-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			.row{margin-bottom: 20px;}
			.row .row{margin-top: 10px;margin-bottom: 0px;}
			[class*="col-"]{
				padding-top: 15px;
				padding-bottom: 15px;
				background-color: #eee;
				background-color: rgba(86,61,124, .15);
			    border: 1px solid #DDDDDD;
			    border: 1px solid rgba(86,61,124,.2);
			}
		</style>
	</head>

	<body>
		<!--bootstrap 是依赖于 container容器而存在的-->
		<!--系统总共12列 不适用table的原因  是因为搜索引擎 对div的搜索 要好与table 标签-->
		<div class="container">
			<div class="row">
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
			</div>
			<div class="row">
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
			</div>
			<div class="row">
				<div class="col-md-3">col-md-3 col-md-3 col-md-3 col-md-3 col-md-3<</div>
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
				<div class="col-md-3">col-md-3</div>
			</div>
			<!--偏移   col-md-offset-1-->
			<div class="row">
				<div class="col-md-4 col-md-offset-1">col-md-4</div>
			</div>
			<!--栅格嵌套的使用-->
			<div class="row">
				<div class="col-sm-9">
					one
					<div class="row">
						<div class="col-xs-8">
							first
						</div>
						<div class="col-xs-4">
							tow
						</div>
					</div>
				</div>
			</div>
			<!--列的排序-->
			<div class="row">
				<div class="col-sm-9">col-sm-9</div>
				<div class="col-sm-3">col-sm-3</div>
			</div>
			<div class="row">
				<!--col-sm-pull-3-->
				<div class="col-md-9 col-md-push-3">col-sm-9</div>
				<div class="col-md-3 col-md-pull-9">col-sm-3</div>
			</div>
		</div>
	</body>

</html>